<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能聊天助手</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>智能聊天助手</h1>
            <p>一个简单的聊天机器人</p>
        </header>
        
        <div class="chat-container">
            <div class="chat-header">
                <h2>聊天界面</h2>
                <button id="clear-history" class="clear-btn">清空历史记录</button>
            </div>
            
            <div class="chat-messages" id="chat-messages">
                <div class="bot-message">
                    <div class="message-content">
                        你好！我是智能聊天助手。有什么我可以帮助你的吗？
                    </div>
                </div>
            </div>
            
            <div class="chat-input">
                <input type="text" id="user-input" placeholder="请输入消息..." autocomplete="off">
                <button id="send-btn" class="send-btn">发送</button>
            </div>
        </div>
        
        <div class="chat-info">
            <h3>使用说明</h3>
            <p>你可以问我以下问题：</p>
            <ul>
                <li>你好 / 嗨</li>
                <li>你是谁 / 你叫什么名字</li>
                <li>你能做什么</li>
                <li>今天星期几</li>
                <li>讲个笑话</li>
                <li>帮助</li>
            </ul>
        </div>
    </div>
    
    <script src="/static/js/main.js"></script>
</body>
</html>